<template>
  <div>
    <el-dialog
        title="添加角色"
        :visible.sync="showRoleAdd"
        width="40%" @close="setShowRoleAdd(false)">
        
        <el-form ref="form" :model="roleObj" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="roleObj.name"></el-input>
            </el-form-item>

            <el-form-item label="拥有权限">
                <el-checkbox-group v-model="checkGradeList">
                    <el-checkbox v-for="grade in gradeList" :label="grade.id"
                     :value="grade.id" :key="grade.id" >{{grade.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="setShowRoleAdd(false)">取 消</el-button>
            <el-button type="primary" @click="addRoleObj">添加</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from "vuex"
export default {
  data(){
    return {
            roleObj:{}, //添加角色对象
            checkGradeList:[], //角色绑定的权限ID数组
            gradeList:[] //所有权限数组
        }
  },
  computed:{
        showRoleAdd:{
          set(isSow){
            this.setShowRoleAdd(isSow);
          },
          get(){
            return  this.$store.state.role.showRoleAdd
          }
        }
    },
  methods:{
        ...mapMutations('role',['setShowRoleAdd']),
        ...mapActions('role',['cutAllRoleList']),
        async addRoleObj(){ //添加角色
          this.roleObj.gradeArray = this.checkGradeList;
           var info =  await this.ajax.getSubmit("/project/role/add",this.roleObj);

           if(info == "ok"){//如果返回值为ok，重新查询所有角色，关闭添加弹出层
             this.cutAllRoleList();
             this.setShowRoleAdd(false);
           }
           
        },
        async findAllGrade(){//查询所有权限
          this.gradeList = await this.ajax.getSubmit("/project/grade/findAll");
        }
  },
  created(){
      this.findAllGrade();
  }

}
</script>

<style>

</style>